<template>
    <div>
        <ElCard class="marginBottom">
            <ElForm inline>
                <ElFormItem label="部门名" style="margin-bottom: 0;">
                    <ElInput v-model="searchDeptName" placeholder="请输入部门名" maxlength="30" show-word-limit></ElInput>
                </ElFormItem>
                <ElFormItem style="margin-bottom: 0;">
                    <ElButton @click="onSearchDept" type="primary">搜索</ElButton>
                    <ElButton @click="onReset" type="primary">重置</ElButton>
                </ElFormItem>
            </ElForm>
        </ElCard>
        <ElCard>
            <template #header>
                <ElButton type="primary" @click="onAddDept()" v-hasPermi="['sys:dept:insert']">新增部门</ElButton>
            </template>
            <ElTable :data="sysDeptVOArray" row-key="id" v-loading="isLoading">
                <ElTableColumn label="部门名" prop="name"></ElTableColumn>
                <ElTableColumn label="创建时间" prop="createTime"></ElTableColumn>
                <ElTableColumn label="修改时间" prop="modifyTime"></ElTableColumn>
                <ElTableColumn label="排序" prop="sort"></ElTableColumn>
                <ElTableColumn label="操作" width="500px">
                    <template #="{ row, $index }: { row: SysDeptVO, $index: number }">
                        <ElButton type="primary" @click="onAddDept(row)" v-hasPermi="['sys:dept:insert']">添加子部门
                        </ElButton>
                        <ElButton type="warning" @click="onEditDept(row)" v-hasPermi="['sys:dept:update']">编辑</ElButton>
                        <Popconfirm :title="`确定删除${row.name}?`" icon="Delete" @confirm="onDeleteDept(row)">
                            <ElButton type="danger" v-hasPermi="['sys:dept:delete']">删除</ElButton>
                        </Popconfirm>
                    </template>
                </ElTableColumn>
            </ElTable>
        </ElCard>

        <!-- 部门 新增/编辑 对话框 -->
        <ElDialog v-model="dialogInfo.show" :title="dialogInfo.title" width="700px" :show-close="false"
            :close-on-press-escape="false" :close-on-click-modal="false">
            <ElForm ref="formInstance" label-position="right" label-width="auto" :rules="dialogFormRules"
                :model="formInfo">
                <ElRow>
                    <ElCol :span="24">
                        <ElFormItem label="父级部门" prop="parentId">
                            <DeptSelect v-model="formInfo.parentId" show-root-dept></DeptSelect>
                        </ElFormItem>
                    </ElCol>
                </ElRow>
                <ElRow>
                    <ElCol :span="12">
                        <ElFormItem label="部门名称" prop="name">
                            <ElInput maxlength="50" show-word-limit v-model="formInfo.name" />
                        </ElFormItem>
                    </ElCol>
                    <ElCol :span="12">
                        <ElFormItem label="排序" prop="sort">
                            <ElInputNumber :min="0" :max="200" v-model="formInfo.sort" style="width: 150px" />
                        </ElFormItem>
                    </ElCol>
                </ElRow>
            </ElForm>
            <template #footer>
                <ElButton @click="hideDialog">取消</ElButton>
                <ElButton type="primary" @click="submitFormData()">确认</ElButton>
            </template>
        </ElDialog>
    </div>
</template>

<script setup lang="ts">
import { addDept, deleteDept, queryDeptAll, updateDept } from '@/api/sysDept/sysDept';
import { sysDeptVOToDTO, type SysDeptDTO, type SysDeptFiltDTO, type SysDeptVO } from '@/api/sysDept/sysDeptType';
import { useFormDialog } from '@/hook/useDialog';
import { ElButton, ElCol, ElDialog, ElForm, ElFormItem, ElInput, ElInputNumber, ElRow, ElTreeSelect, type FormRules } from 'element-plus';
import { onBeforeMount, reactive, ref } from 'vue';
import DeptSelect from '../components/DeptSelect.vue';

const rootDeptId: string = "0"
/**
 * 搜索筛选部门名
 */
const searchDeptName = ref<string>()
/**
 * 当前界面总的部门信息
 */
const sysDeptVOArray = ref<SysDeptVO[]>()
/**
 * 数据是否正在加载中
 */
const isLoading = ref<boolean>(false)

/**
 * 初始化界面数据显示
 */
const initViewData = async (sysDeptFiltDTO?: SysDeptFiltDTO) => {
    isLoading.value = true
    sysDeptVOArray.value = await queryDeptAll(false, sysDeptFiltDTO)
    isLoading.value = false
}

/**
 * 挂载前执行
 */
onBeforeMount(() => {
    initViewData()
})

/**
 * 搜索
 */
const onSearchDept = () => {
    initViewData({
        name: searchDeptName.value
    })
}

/**
 * 重置搜索筛选条件
 */
const onReset = () => {
    initViewData()
}

/**
 * 新增部门
 * @param parentSysDeptVO 要添加到的父部门
 */
const onAddDept = (parentSysDeptVO?: SysDeptVO) => {
    showDialog('新增部门', {
        parentId: parentSysDeptVO?.id ?? rootDeptId,
    } as SysDeptDTO, () => addDept(formInfo.value))
}

/**
 * 修改部门
 * @param sysDeptVO 要修改的部门
 */
const onEditDept = (sysDeptVO: SysDeptVO) => {
    showDialog('编辑部门', sysDeptVOToDTO(sysDeptVO), () => updateDept({ id: formInfo.value.id }, formInfo.value))
}

/**
 * 删除部门
 * @param sysDeptVO 要删除的部门
 */
const onDeleteDept = async (sysDeptVO: SysDeptVO) => {
    await deleteDept({ id: sysDeptVO.id })
    initViewData()
}

/**
 * 部门 新增/编辑 对话框相关内容
 */
const {
    showDialog,
    hideDialog,
    submitFormData,
    dialogInfo,
    formInfo,
    formInstance
} = useFormDialog<SysDeptDTO>(() => initViewData())

/**
 * 对话框校验规则
 */
const dialogFormRules = reactive<FormRules>({
    parentId: {
        required: true, message: "请选择父级部门", trigger: "blur"
    },
    sort: {
        required: true, message: "请输入排序序号", trigger: 'blur',
    },
    name: [
        { required: true, message: '请输入部门名称', trigger: 'blur' },
        { min: 2, max: 30, message: '部门名称长度为2 - 30', trigger: 'blur' }
    ]
})
</script>

<style scoped lang="scss"></style>